
<script setup>
import { User, ArrowRight, } from "@element-plus/icons-vue";
import { Indexget_type } from "../utils/api"
import { reactive, defineProps, computed } from "vue";
import { useRouter } from "vue-router";

// defineProps({
//   msg: String,
// });
defineProps({
    isBottmNavigation: {
        type: Boolean,
        default: true,
        required: false
    },
    lisindex:{
        default:0
    },
});



const router = useRouter();
const data = reactive({
    showSearchHistory: false, //显示搜索历史
    // activeNav: 0,  //navLIst的当前项
    navLIst: [{
        name: '首页', path: '/',
    }, {
        name: '品牌特卖', path: '/index/Brandspecial',
    }, {
        name: '奈喜严选', path: '/index/Findnew',
    }, {
        name: '海外专区', path: '/index/OverseasArea',
    }, {
        name: '找新品', path: '/index/Findnewproducts',
    }, { name: '找批发商', path: '/index/Findthefactory', }]
});

const datalist = computed(() => {
    let arr = [...data.navLIst]
    arr.forEach((item, index) => {
        if (!item.is_top) {
            arr.splice(index, 1)
        }
    })
    return arr;
})
Indexget_type().then(res => {
    if (res.code == 200) {
        data.navLIst = res.data
    }
})
const gotoRouter = (val,id) => {
    // data.activeNav = val
    // localStorage.setItem('navlis',val)
    router.push({ path: data.navLIst[val].tab,query:{platform_type_id:id} });
};
const go=()=>{
    localStorage.removeItem('leftactive')
    // localStorage.setItem('leftactive', null);
    router.push({ path: '/order/orderHome'})
}

</script>

<template>

    <div class="wrapCenter" style="padding-top: 40px;">

        <div>
            <div class="flex" style="align-items:flex-start">
                <div class="left">
                    <img src="../assets/logo.png" alt="">
                </div>
                <div class="right flex">
                    <div>
                        <div class="inputBox flex">
                            <input type="text" placeholder="请输入商品名称" @focus="data.showSearchHistory = true"
                                @blur="data.showSearchHistory = false" />
                            <div class="seacrhIcon cur">
                                <img src="../assets/search.png">
                            </div>
                        </div>
                        <div class="searchHistory fontS16" v-if="data.showSearchHistory">
                            <div class="co9">最近搜过</div>
                            <div style="color:#5C7DCD" class="cur">行李箱</div>
                            <div style="color:#5C7DCD" class="cur">连衣裙</div>
                        </div>
                        <div class="flex fontS16 input_B">
                            <div class="homeRed cur">中秋</div>
                            <div class="homeRed cur">T恤</div>
                            <div class="homeRed cur">白酒</div>
                            <div class="cur">中秋</div>
                            <div class="cur">T恤</div>
                            <div class="cur">白酒</div>
                            <div class="cur">海蓝之谜</div>
                            <div class="cur">零食大礼包</div>
                        </div>
                    </div>
                    <div class="userAndcart flex">
                        <div class="box co6 fontS16 flex cur" @click="go">
                            <el-icon :size="24" color="#666">
                                <User />
                            </el-icon>
                            <span>个人中心</span>
                        </div>
                        <div class="box cof cur flex">
                            <img src="../assets/cart.png" alt="" style="width:28px;height:25px">
                            <span style="padding:0 12px">购物车</span>
                            <el-icon :size="14" color="#fff">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom flex fontS20" v-if="isBottmNavigation">
                <div class="allcate center  cur">全部商品分类</div>
                <div v-for="(item, index) in datalist" :key="index" class="cur co6"
                    :class="lisindex == index ? 'homeRed' : ''" @click="gotoRouter(index,item.id)">{{ item.name }}
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped lang="less">
.bottom {
    margin-top: 40px;

    div {
        margin-right: 80px;
    }

    .allcate {
        width: 288px;
        height: 48px;
        line-height: 48px;
        background: #DD2131;
        color: #fff;

    }
}

.left {

    margin-right: 90px;
}

.right {
    .searchHistory {
        width: 608px;
        padding: 10px;
        box-sizing: border-box;
        background: #FFFFFF;
        opacity: 1;
        border: 1px solid #CCCCCC;
        position: absolute;

        div {
            margin-top: 16px;
        }

        div:nth-of-type(1) {
            margin-top: 0;
        }
    }

    align-items: flex-start;

    .userAndcart {
        margin-left: 40px;

        .box {
            height: 48px;
            line-height: 48px;
            padding: 0 24px;
            background: #F5F5F5;
            opacity: 1;
            border: 1px solid #CCCCCC;
        }

        .box:nth-of-type(2) {
            background: #DD2131;
            border-color: #DD2131;
        }
    }

    .input_B {
        margin-top: 14px;

        div {
            margin-right: 20px;
        }
    }

    .inputBox {
        width: 683px;
        height: 48px;
        border: 2px solid #DD2131;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #fff;

        input {
            height: 41px;
            flex: 1;
            border: none;
            outline: none;
        }

        .seacrhIcon {
            width: 75px;
            height: 48px;
            background: #DD2131;
            display: flex;
            align-items: center;
            position: relative;
            right: -1px;

            img {
                width: 29.97px;
                height: 29.97px;
                margin: 0 auto;
            }
        }
    }

}
</style>
